<script setup lang="ts">
// 定义显示在菜单栏的页面
const menuPages: Record<string, string> = {
    '/': '首页',
    '/about': '关于'
}
const route = useRoute()
const activeIndex = computed(() => {
    const path = route.path
    return Object.keys(menuPages).find(key => key === path)
})

</script>
<template>
    <div>
        <SeoKit />
        <el-container>
            <!-- 菜单的DOM结构对于每个用户都一样，最多只有内容不同，因此可以服务器渲染 -->
            <el-header>
                <el-menu :default-active="activeIndex" :ellipsis="false" class="menu" mode="horizontal" router>
                    <el-text v-if="activeIndex" style="font-size: var(--el-font-size-extra-large)" tag="b">
                        {{ menuPages[activeIndex] }}
                    </el-text>
                    <!-- 与ellipsis配合，将div之后的菜单项都放右侧 -->
                    <div class="flex-grow" />
                    <el-menu-item v-for="(name, path) in menuPages" :key="path" :index="path">
                        {{ name }}
                    </el-menu-item>
                </el-menu>
            </el-header>

            <el-main>
                <NuxtPage />
            </el-main>
        </el-container>
    </div>
</template>
<style scoped>
/* 禁止用户选中菜单文本 */
.menu {
    user-select: none;
}

/* 将一行填满,配合ellipsis使用可将菜单项全挤在右侧 */
.flex-grow {
    flex-grow: 1;
}
</style>
